// --------------------------- 获取分类数据并渲染 --------------------------
function renderCategory() {
    $.ajax({
        url: '/my/category/list',
        success: function (res) {
            if (res.status === 0) {
                let arr = [];
                res.data.forEach(item => {
                    arr.push(`<tr>
              <td>${item.name}</td>
              <td>${item.alias}</td>
              <td>
                <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
                <button data-id="${item.id}" type="button" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
              </td>
            </tr>`);
                })
                // 循环结束，得到全部tr，把他们放到tbody里面
                $('tbody').html(arr.join(""));
            }
        }
    });
}

renderCategory();

// ----------------------------- 添加类别 -------------------------------
let addIndex;
// 1. 点击 “添加类别” 按钮，出现弹层
$('button:contains("添加类别")').on('click', function () {
    addIndex = layer.open({
        type: 1,
        title: '添加类别',
        content: $('#tpl-add').html(),
        area: ['500px', '250px']
    });
})

// 2. 表单提交，调用接口，提交数据
$('body').on('submit', '#add-form', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: '/my/category/add',
        data: $(this).serialize(),
        success: function (res) {
            // { status: 0, message: 'xxxx' }
            layer.msg(res.message);
            if (res.status === 0) {
                renderCategory();
                layer.close(addIndex);
            }
        }
    });
})


// ----------------------------- 修改类别 -------------------------------
let form = layui.form;
let editIndex;
// 1. 点击 “编辑” 按钮，出现弹层
$('tbody').on('click', 'button:contains("编辑")', function () {
    // 获取三个 data-xxx 属性值
    let data = $(this).data();
    // console.log(data); // {alias: "art", name: "艺术", id: 4}
    editIndex = layer.open({
        type: 1,
        title: '编辑类别',
        content: $('#tpl-edit').html(),
        area: ['500px', '250px'],
        // 弹层成功出现后，执行下面的success函数
        success: function () {
            // 2. 数据回填
            form.val('edit', data);
        }
    });
})


// 3. 表单提交，调用接口，完成修改
$('body').on('submit', '#edit-form', function (e) {
    e.preventDefault();
    let shuju = $(this).serialize();
    // console.log(shuju);
    $.ajax({
        type: 'POST',
        url: '/my/category/update',
        data: shuju,
        success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {
                renderCategory();
                layer.close(editIndex);
            }
        }
    });
})

//——————————————————————————————删除类别——————————————————————————
$('tbody').on('click', 'button:contains("删除")', function () {
    // 获取id
    var id = $(this).data('id');

    // 询问是否要删除
    layer.confirm('你确定要删除吗？', function (index) {
        // do something

        // 点击确定，这个函数触发了
        // console.log(id);
        // 发送ajax请求进行删除操作
        $.ajax({
            url: '/my/category/delete',
            data: { id: id },
            success: function (res) {
                // console.log(res);
                // 无论删除成功，还是失败，都给出提示
                layer.msg(res.message);
                // 删除成功，重新渲染页面
                if (res.status === 0) {
                    renderCategory();
                }
            }
        });
        // 关闭弹层
        layer.close(index);
    });
});
